<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- BEGIN HEAD -->
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport"/>
    <meta name="description" content="Responsive Admin Template"/>
    <meta name="author" content="SmartUniversity"/>
    <title>Spice Hotel | Bootstrap 4 Admin Dashboard Template + UI Kit</title>
    <!-- google font -->
    <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet" type="text/css"/>
    <!-- icons -->
    <link th:href="@{/assets/plugins/simple-line-icons/simple-line-icons.min.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/assets/plugins/font-awesome/css/font-awesome.min.css}" rel="stylesheet" type="text/css"/>
    <!--bootstrap -->
    <link th:href="@{/assets/plugins/bootstrap/css/bootstrap.min.css}" rel="stylesheet" type="text/css"/>
    <!-- Material Design Lite CSS -->
    <link rel="stylesheet" th:href="@{/assets/plugins/material/material.min.css}">
    <link rel="stylesheet" th:href="@{/assets/css/material_style.css}">
    <!-- animation -->
    <link th:href="@{/assets/css/pages/animate_page.css}" rel="stylesheet">
    <!-- Template Styles -->
    <link th:href="@{/assets/css/style.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/assets/css/plugins.min.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/assets/css/responsive.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/assets/css/theme-color.css}" rel="stylesheet" type="text/css"/>
    <!-- dropzone -->
    <link th:href="@{/assets/plugins/dropzone/dropzone.css}" rel="stylesheet" media="screen">
    <!-- Date Time item CSS -->
    <link rel="stylesheet" th:href="@{/assets/plugins/material-datetimepicker/bootstrap-material-datetimepicker.css}"/>
    <!-- favicon -->
    <link rel="shortcut icon" th:href="@{/assets/img/favicon.ico}"/>
</head>
<!-- END HEAD -->
<body class="page-header-fixed sidemenu-closed-hidelogo page-content-white page-md header-white dark-sidebar-color logo-dark">
<div class="page-wrapper">
    <!-- start header -->
    <div th:replace="~{commons::headnavbar}"></div>
    <!-- end header -->
    <!-- start page container -->
    <div class="page-container">
        <!-- start sidebar menu -->
        <div th:replace="~{commons::sidebar(active='edit_staff',open='staff')}"></div>
        <!-- end sidebar menu -->
        <!-- start page content -->
        <div class="page-content-wrapper">
            <div class="page-content">
                <div class="page-bar">
                    <div class="page-title-breadcrumb">
                        <div class=" pull-left">
                            <div class="page-title">Edit Staff Details</div>
                        </div>
                        <ol class="breadcrumb page-breadcrumb pull-right">
                            <li><i class="fa fa-home"></i>&nbsp;<a class="parent-item"
                                                                   href="index.html">Home</a>&nbsp;<i
                                    class="fa fa-angle-right"></i>
                            </li>
                            <li><a class="parent-item" href="">Staff</a>&nbsp;<i class="fa fa-angle-right"></i>
                            </li>
                            <li class="active">Edit Staff Details</li>
                        </ol>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <form class="card-box" th:action="@{/staff/updateStaff}" th:method="post">
                            <input type="hidden" name="_method" value="put">
                            <div class="card-head">
                                <header>基本信息</header>
                                <button id="panel-button"
                                        class="mdl-button mdl-js-button mdl-button--icon pull-right"
                                        data-upgraded=",MaterialButton">
                                </button>

                            </div>
                            <div class="card-body row">
                                <div class="col-lg-6 p-t-20">
                                    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label txt-full-width">
                                        <input class="mdl-textfield__input" type="text" th:value="${toUpdateStaff.id}"
                                               name="id" readonly>
                                        <label class="mdl-textfield__label">员工编号</label>
                                    </div>
                                </div>
                                <div class="col-lg-6 p-t-20">
                                    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label txt-full-width">
                                        <input class="mdl-textfield__input" type="text"
                                               th:value="${toUpdateStaff.sname}" name="sname">
                                        <label class="mdl-textfield__label">员工姓名 Name</label>
                                    </div>
                                </div>
                                <div class="col-lg-6 p-t-20">
                                    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label txt-full-width">
                                        <input class="mdl-textfield__input" type="email" name="email"
                                               th:value="${toUpdateStaff.email}">
                                        <label class="mdl-textfield__label">Email</label>
                                        <span class="mdl-textfield__error">邮箱地址</span>
                                    </div>
                                </div>
                                <div class="col-lg-6 p-t-20">
                                    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label txt-full-width">
                                        <input class="mdl-textfield__input" type="text" name="joindate"
                                               th:value="${#dates.format(toUpdateStaff.joindate,'yyyy-MM-dd')}">
                                        <label class="mdl-textfield__label">入职时间</label>
                                    </div>
                                </div>
                                <div class="col-lg-6 p-t-20">
                                    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label txt-full-width">
                                        <input class="mdl-textfield__input" type="text" name="age"
                                               th:value="${toUpdateStaff.age}">
                                        <label class="mdl-textfield__label">年龄</label>
                                    </div>
                                </div>
                                <div class="col-lg-6 p-t-20">
                                    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label txt-full-width">
                                        <input class="mdl-textfield__input" type="text" name="designation"
                                               th:value="${toUpdateStaff.designation}">
                                        <label class="mdl-textfield__label">职位</label>
                                    </div>
                                </div>
                                <div class="col-lg-6 p-t-20">
                                    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label txt-full-width">
                                        <input class="mdl-textfield__input" type="text" name="phone"
                                               th:value="${toUpdateStaff.phone}">
                                        <label class="mdl-textfield__label">电话</label>
                                    </div>
                                </div>
                                <div class="col-lg-6 p-t-20">
                                    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label getmdl-select getmdl-select__fix-height txt-full-width">
                                        <label>性别</label><br/>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="gender" value="1"
                                                   th:checked="${toUpdateStaff!=null}?${toUpdateStaff.gender==1}">
                                            <label class="form-check-label">男</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="gender" value="0"
                                                   th:checked="${toUpdateStaff!=null}?${toUpdateStaff.gender==0}">
                                            <label class="form-check-label">女</label>
                                        </div>
                                    </div>
                                </div>


                            </div>
                            <div class="col-lg-12 p-t-20 text-center">
                                <button type="submit"
                                        class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect m-b-10 m-r-20 btn-pink">
                                    提交修改
                                </button>
                                <a class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect m-b-10 btn-default"
                                   th:href="@{/staff/staffs}">回到员工页面</a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end page content -->

    <div th:replace="~{commons::settingtools}"></div>
</div>
<!-- end page container -->
<!-- start footer -->
<div th:replace="~{commons::footer}"></div>
<!-- end footer -->
</div>
<!-- start js include path -->
<script th:src="@{/assets/plugins/jquery/jquery.min.js}"></script>
<script th:src="@{/assets/plugins/popper/popper.min.js}"></script>
<script th:src="@{/assets/plugins/jquery-blockui/jquery.blockui.min.js}"></script>
<script th:src="@{/assets/plugins/jquery-slimscroll/jquery.slimscroll.min.js}"></script>
<!-- bootstrap -->
<script th:src="@{/assets/plugins/bootstrap/js/bootstrap.min.js}"></script>
<!-- Common js-->
<script th:src="@{/assets/js/app.js}"></script>
<script th:src="@{/assets/js/layout.js}"></script>
<script th:src="@{/assets/js/theme-color.js}"></script>
<!-- Material -->
<script th:src="@{/assets/plugins/material/material.min.js}"></script>
<script th:src="@{/assets/js/pages/material_select/getmdl-select.js}"></script>
<script th:src="@{/assets/plugins/material-datetimepicker/moment-with-locales.min.js}"></script>
<script th:src="@{/assets/plugins/material-datetimepicker/bootstrap-material-datetimepicker.js}"></script>
<script th:src="@{/assets/plugins/material-datetimepicker/datetimepicker.js}"></script>
<!-- dropzone -->
<script th:src="@{/assets/plugins/dropzone/dropzone.js}"></script>
<script th:src="@{/assets/plugins/dropzone/dropzone-call.js}"></script>
<!-- animation -->
<script th:src="@{/assets/js/pages/ui/animations.js}"></script>
<!-- end js include path -->
</body>
</html>